<template>
  <div class="home">
    <div class="home-card">
      <div class="home-card-item">
        <p>昨日门户访问次数</p>
        <h1>{{ countPortalVisit.portalCount.count }}<em>次</em></h1>
        <span
          >同比前日<em>⬆</em>
          <i>
            上涨
            {{
              countPortalVisit.portalCount.value +
              countPortalVisit.portalCount.el
            }}
          </i>
        </span>
      </div>
      <div class="home-card-item">
        <p>昨日咨询访问量</p>
        <h1>{{ countPortalVisit.helpCount.count }}<em>次</em></h1>
        <span
          >同比前日<em>⬆</em>
          <i>
            上涨
            {{
              countPortalVisit.helpCount.value + countPortalVisit.helpCount.el
            }}
          </i>
        </span>
      </div>
      <div class="home-card-item">
        <p>昨日热门栏目访问量</p>
        <h1>{{ countPortalVisit.suggestCount.count }}<em>次</em></h1>
        <span
          >同比前日<em>⬆</em>
          <i>
            上涨
            {{
              countPortalVisit.suggestCount.value +
              countPortalVisit.suggestCount.el
            }}
          </i>
        </span>
      </div>
      <div class="home-card-item">
        <p>昨日资讯访问量</p>
        <h1>{{ countPortalVisit.articleCount.count }}<em>次</em></h1>
        <span
          >同比前日<em>⬆</em>
          <i>
            上涨
            {{
              countPortalVisit.articleCount.value +
              countPortalVisit.articleCount.el
            }}
          </i>
        </span>
      </div>
    </div>
    <!-- 门户访问子系统 -->
    <div class="home-statistics">
      <h1>门户访问子系统</h1>
      <line-stack name="countSystem" :data="countSystem"></line-stack>
    </div>
    <!-- 三方链接访问量 -->
    <div class="home-statistics">
      <h1>三方链接访问量</h1>
      <line-stack name="countLink" :data="countLink"></line-stack>
    </div>
  </div>
</template>
<script>
import lineStack from '@c/echarts/line-stack.vue'
export default {
  components: { lineStack },
  data() {
    return {
      countPortalVisit: {
        articleCount: {
          count: 0,
          value: 0,
          el: '%',
        },
        helpCount: { count: 0, value: 0, el: '%' },
        portalCount: { count: 0, value: 0, el: '%' },
        suggestCount: { count: 0, value: 0, el: '%' },
      },
      countSystem: {
        categories: [],
        series: []
      },
      countLink: {
        categories: [],
        series: []
      },
    }
  },
  created() {
    this.getCountPortalVisit()
    this.getCountSystem()
    this.getCountLink()
  },
  methods: {
    getCountPortalVisit() {
      //门户访问量
      this.$axios.get('/admin/portal/count/countPortalVisit').then((data) => {
        this.countPortalVisit = {
          articleCount: {
            count: 0,
            value: 0,
            el: '%',
          },
          helpCount: { count: 0, value: 0, el: '%' },
          portalCount: { count: 0, value: 0, el: '%' },
          suggestCount: { count: 0, value: 0, el: '%' },
        }
        if (data.code == 200) {
          this.countPortalVisit = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getCountSystem() {
      //门户访问子系统
      this.$axios.get('/admin/portal/count/countSystem').then((data) => {
        this.countSystem = {
          categories: [],
          series: []
        }
        if (data.code == 200) {
          this.countSystem = {
            categories: data.data.lineX.data,
            series: data.data.lineY
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getCountLink() {
      //三方链接访问量
      this.$axios.get('/admin/portal/count/countLink').then((data) => {
        this.countLink = {
          categories: [],
          series: []
        }
        if (data.code == 200) {
          this.countLink = {
            categories: data.data.lineX.data,
            series: data.data.lineY
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.home {
  &-card {
    display: flex;
     justify-content: space-between;
    &-item {
      width: 100%;
      border-radius: 4px;
      background: #ffffff;
      padding: 15px 25px;
      margin: 0 20px;
      p {
        color: #b1b1b1;
        font-size: 16px;
      }
      h1 {
        font-size: 32px;
        font-weight: 400;
        margin: 10px 0 15px;
        em {
          color: #b1b1b1;
          font-size: 16px;
          padding-left: 3px;
        }
      }
      span {
        display: block;
        color: #b1b1b1;
        font-size: 16px;
        text-align: right;
        em {
          font-size: 22px;
          color: #f9590b;
          padding-left: 15px;
        }
        i {
          color: #f9590b;
        }
      }
    }
    :first-child {
      margin-left: 0;
    }
    :last-child {
      margin-right: 0;
    }
  }
  &-statistics {
    background: #ffffff;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 4px;
    h1 {
      height: 36px;
      line-height: 36px;
      font-size: 18px;
      font-weight: 400;
      padding-left: 20px;
      color: #000000;
      position: relative;
    }
    h1::after {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 21px;
      height: 24px;
      background: url(~@/assets/images/apply_bg.png);
      background-size: 100% 100%;
    }
  }
  &-statistics:last-child {
    margin-bottom: 20px;
  }
}
</style>
